<!--任务列表页-->
<template>

  <div>
    <!--新增或修改弹出框-->
    <task-add :visible.sync="addVisible" @changeAddVisable="changeAddVisable" @query="query" ref="taskAdd"></task-add>
    <!--上传文件弹出框-->
    <upload-file :visible.sync="uploadVisible" @changeUploadVisable="changeUploadVisable"></upload-file>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="任务内容">
        <el-input v-model="formInline.content" placeholder="任务内容"></el-input>
      </el-form-item>
      <el-form-item label="查询日期">
        <el-date-picker type="date" placeholder="选择日期" v-model="formInline.endTime" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="查询状态">
        <el-select v-model="formInline.status" placeholder="查询状态">
          <el-option label="已完成" value="1"></el-option>
          <el-option label="未完成" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
        <el-button @click="reset()">清除</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="add">新增</el-button>
    <el-button type="primary" @click="exportExcel">导出</el-button>
    <el-button type="primary" @click="importExcel">导入</el-button>
    <el-button type="primary" @click="deleteConfirm(1)">批量删除</el-button>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"@selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="content"
        label="任务内容"
        width="180">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间" >
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="开始时间">
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间" >
      </el-table-column>
      <el-table-column
        prop="completionTime"
        label="实际完成时间" >
      </el-table-column>
      <el-table-column
        prop="status"
        label="完成状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status==1">未完成</span>
          <span v-else>已完成</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="updateRow(scope.row)" type="text" size="small">编辑</el-button>
          <el-button type="text"  @click="deleteConfirm(2,scope.row)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10,20, 50, 100]"
        :page-size="pageSize"
        layout="total,sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import  qs from 'qs'//序列化参数
  import TaskAdd from "./TaskAdd";
  import UploadFile from "./UploadFile";
  export default {
    name: "TaskList",
    components:{TaskAdd,UploadFile},
    data() {
      return {
        //查询表单
        formInline: {},
        //列表
        tableData: [],
        //分页
        currentPage: 1,
        pageSize: 5,
        total: 0,
        //弹出框
        addVisible:false,//新增
        uploadVisible:false,//导入
        taskInfo:{},
        //选中的行
        multipleSelection: []
      }
    },
    mounted() {

    },
    created() {
      this.query();
    },
    methods: {
      //多选操作
      handleSelectionChange(val) {
        this.multipleSelection = val;
        // console.log(this.multipleSelection);
      },
      //修改弹出框可见性
      changeAddVisable(val){
        this.addVisible = val;
      },
      //修改弹出框可见性
      changeUploadVisable(val){
        this.uploadVisible = val;
      },
      //日期格式化
      dateFormat(row, column, cellValue, index) {
        const daterc = row[column.property]
        if (daterc != null) {
          const dateMat = new Date(parseInt(daterc.replace("/Date(", "").replace(")/", ""), 10));
          const year = dateMat.getFullYear();
          const month = dateMat.getMonth() + 1;
          const day = dateMat.getDate();
          // const hh = dateMat.getHours();
          // const mm = dateMat.getMinutes();
          // const ss = dateMat.getSeconds();
          const timeFormat = year + "/" + month + "/" + day;
          return timeFormat;
        }
      },
      //分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.query();
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.query();
        console.log(`当前页: ${val}`);
      },
      //新增
      add() {
        this.$refs.taskAdd.clearForm();
        this.$refs.taskAdd.task.createTime = new Date();
        this.$refs.taskAdd.task.status = "1";
        this.changeAddVisable(true);
      },
      //导出
      exportExcel(){
        window.open(this.$axios.defaults.baseURL+"/excel/task/exportExcel?"+qs.stringify(this.formInline))
      },
      //导入
      importExcel(){
        this.changeUploadVisable(true);
      },
      //查询
      query() {
        // POST方式提交表单信息
        this.$axios({
          method: "post",
          url: "task/page",
          params: {"currentPage": this.currentPage, "pageSize": this.pageSize},
          data: this.formInline
        }).then((res) => {
          console.log(res.data);
          // 如果返回code为1说明后台处理了请求
          if (res.data.code == "1") {
            this.tableData = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            alert("网络错误");
          }
        })
      },
      //重置
      reset() {
        this.formInline = {};
      },
      //编辑
      updateRow(row) {
        let newRow = JSON.parse(JSON.stringify(row));
        newRow.status = String(newRow.status);
        this.$refs.taskAdd.task = newRow;
        this.changeAddVisable(true);
      },
      //批量删除
      deleteBatch(){
        let arr = [];
        this.multipleSelection.forEach(item=>{
          arr.push(item.id);
        })
          this.$axios({
            method: "post",
            url: "task/removeBatch",
            data: arr
          }).then((res) => {
            console.log(res.data);
            // 如果返回code为1说明后台处理了请求
            if (res.data.code == "1") {
              this.$alert("删除成功")
              this.query();
            } else {
              alert("网络错误");
            }
          }).catch(err=>{
            this.$alert("删除失败")
          })
      },
      //删除单条
      deleteRow(row){
          this.$axios({
            method: "post",
            url: "task/remove",
            data: row.id
          }).then((res) => {
            console.log(res.data);
            // 如果返回code为1说明后台处理了请求
            if (res.data.code == "1") {
              this.$alert("删除成功");
              //重新获取列表
              this.query();
            } else {
              alert("网络错误");
            }
          }).catch(err=>{
            this.$alert("删除失败")
          })
      },
      //删除确认
      deleteConfirm(flag,row){
        if(flag == 1 && this.multipleSelection.length == 0){
            this.$alert("未选中任何记录，请重新选择");
            return;
        }
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            //批量删除
            if(flag == 1){
              this.deleteBatch();
            }
            //单个删除
            if(flag == 2){
                this.deleteRow(row);
            }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

<style scoped>

</style>
